<template>
	<view>
		<u-navbar :is-back="true" title="">
			<view class="slot-wrap u-flex">
				<view class="body">
					<image src="../../static/img/acitivity/sousuo.png" class="head-icon"></image>
					<input type="text" placeholder="" class="sou-input" />
				</view>
				<view class="right">
					搜索
				</view>
			</view>
		</u-navbar>
		<view class="gerenziliao-tab">
				<u-tabs-swiper ref="uTabs" :list="list" :bar-style="barstyle"  :current="current" @change="tabsChange" :is-scroll="false" active-color="#1b1b1b" 
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<view class="sorting">
				<text class="sort-cell">综合排序</text>
				<text class="sort-cell">价格排序</text>
				<text class="sort-cell">时间排序</text>				 
			</view>
			<view class="video-tabCont">
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="video-swiper">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
							<view class="activity-list">
								<view class="activity-list-cell">
									<image src="../../static/demo/1.jpg" class="activity-img"></image>
									<view class="activity-body">
										<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
										<view class="activity-cont">
											<text>活动时间：2021-04-18 14:00</text>
											<text class="u-line-1">地址：上海黄浦区xx街xx号14栋2021室</text>
										</view>
										<view class="activity-body-bottom">
											<view class="activity-price"><text style="color: #ff0000; font-size: 34rpx;">170</text>元/人</view>
											<view class="acitivity-btn">活动参与</view>
										</view>
									</view>
								</view>
								<view class="activity-list-cell">
									<image src="../../static/demo/1.jpg" class="activity-img"></image>
									<view class="activity-body">
										<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
										<view class="activity-cont">
											<text>活动时间：2021-04-18 14:00</text>
											<text class="u-line-1">地址：上海黄浦区xx街xx号14栋2021室</text>
										</view>
										<view class="activity-body-bottom">
											<view class="activity-price"><text style="color: #ff0000; font-size: 34rpx;">170</text>元/人</view>
											<view class="acitivity-btn">活动参与</view>
										</view>
									</view>
								</view>
								<view class="activity-list-cell">
									<image src="../../static/demo/1.jpg" class="activity-img"></image>
									<view class="activity-body">
										<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
										<view class="activity-cont">
											<text>活动时间：2021-04-18 14:00</text>
											<text class="u-line-1">地址：上海黄浦区xx街xx号14栋2021室</text>
										</view>
										<view class="activity-body-bottom">
											<view class="activity-price"><text style="color: #ff0000; font-size: 34rpx;">170</text>元/人</view>
											<view class="acitivity-btn">活动参与</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		<tarBer :totarBer='tar'></tarBer>
	</view>
</template>

<script>
	import tarBer from '../../components/tabBarFoot/tabBarFoot.vue'
	export default {
		components:{
				 tarBer
			 },
		data() {
			return {
			tar:{
					color:'#fff',
					id:1
				 },	
			list: [{
						name: '全部'
					}, {
						name: '线上'
					}, {
						name: '线下'
					},
					{
						name: '附近'
					}
					],
					// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
					current: 0, // tabs组件的current值，表示当前活动的tab选项
					swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
					barstyle:{
						backgroundColor:'#2ea34a'
					}
				};
			},
			methods: {
				// tabs通知swiper切换
				tabsChange(index) {
					this.swiperCurrent = index;
				},
				// swiper-item左右移动，通知tabs的滑块跟随移动
				transition(e) {
					let dx = e.detail.dx;
					this.$refs.uTabs.setDx(dx);
				},
				// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
				// swiper滑动结束，分别设置tabs和swiper的状态
				animationfinish(e) {
					let current = e.detail.current;
					this.$refs.uTabs.setFinishCurrent(current);
					this.swiperCurrent = current;
					this.current = current;
				},
				// scroll-view到底部加载更多
				onreachBottom() {
					
				}		
			}
	}
</script>

<style lang="scss">
page{
	height: 100%;
	background-color: #ebebeb;
}
.video-tabCont{
	height: calc(100vh - 250rpx);
}
.video-swiper{
	height: 100%;
}
.slot-wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	.left{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		.dizhi-icon{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.body{
		flex: 1;
		background-color: #eeeeee;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 15rpx;
		height: 60rpx;
		margin-left: 30rpx;
		.sou-input{
			margin-bottom: 0;
			padding-left: 20rpx;
		}
	}
	.right{
		margin-left: 30rpx;
		.head-icon{
			margin-left: 20rpx;
		}
	}
	.head-icon{
		width: 40rpx;
		height: 40rpx;
		
	}
}
.banner{
	margin: 30rpx;
}
.nav_menu{
	display: flex;
	justify-content: center;
	margin: 0 30rpx 30rpx;
	.menu-list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 25%;
		align-items: center;
	}
	.menu-icon{
		width: 48rpx;
		height: 48rpx;
	}
	.menu-list-text{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
}
.huodong-top{
	display: flex;
	align-items: center;
	padding: 0 30rpx 30rpx;
	color: #040406;
	font-size: 30rpx;
	border-bottom: 1px solid #ebebeb;
	.huodong-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}
}
.activity-list{
	.activity-list-cell{
		display: flex;
		justify-content: space-between;
		padding: 40rpx 30rpx;
		position: relative;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;
		.activity-img{
			width: 240rpx;
			height: 205rpx;
			border-radius: 20rpx;
			margin-right: 30rpx;
		}
		.activity-body{
			flex: 1;
			.activity-name{
				font-size: 24rpx;
				color: #515151;
			}
			.activity-cont{
				margin: 15rpx 0;
				display: flex;
				flex-direction: column;
				color: #8e908f;
				font-size: 22rpx;
			}
		}
		.activity-body-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.activity-price{
				color: #8e908f;
				font-size: 24rpx;
			}
			.acitivity-btn{
				color: #FFFFFF;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #2ea34a;
				border-radius: 10rpx;
				font-size: 24rpx;
			}
		}
	}
}

.gerenziliao-tab{
	padding: 10rpx 0 35rpx;
	background-color: #FFFFFF;
}
.sorting{
	padding: 0 35rpx;
	background-color: #FFFFFF;
	.sort-cell{
		margin-right: 50rpx;
	}
}
</style>
